<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { limitFloat } from '@/utils/common.js'
const strategyFlag = ref(false);
const confrimStrategy = ()=>{

}
const changeStrategy = ()=>{
    strategyFlag.value = true;
}
const form = ref({
    condition:"",
    price:""
})
</script>
<template>
    <div class="page-info">
        
        <div class="lis-head">
            <div class="icon-view">
                <div class="icon-view-on"></div>
            </div>
            <span class="label-name">运费策略</span>
        </div>
        <div class="p-line" style="margin-bottom:24px">
            <span>店铺运费设置：</span>
            <span>未设置</span>
            <span class="a-link" style="margin-left:8px" @click="changeStrategy()">修改</span>
        </div>
        <div class="lis-head">
            <div class="icon-view">
                <div class="icon-view-on"></div>
            </div>
            <span class="label-name">常见问题</span>
        </div>
        <div class="lis">
            <div class="question">
                <div class="img">问</div>
                <span>1、什么是店铺运费策略？</span>
            </div>
            <div class="p-line">
                <span>为整个店铺设置运费的策略，例如全店铺满X元包邮，则意味全场店铺商品满X元包邮。</span>
            </div>
        </div>
        <div class="lis">
            <div class="question">
                <div class="img">问</div>
                <span>2、如何设置店铺运费策略？</span>
            </div>
            <div class="p-line">
                <span>默认您的店铺为不设置，您可选择设置全场包邮或者满额包邮。</span>
            </div>
        </div>
        <div class="lis">
            <div class="question">
                <div class="img">问</div>
                <span>3、运费模板和店铺运费策略有什么关系？</span>
            </div>
            <div class="p-line" style="margin-bottom:12px">
                <span>运费模板是商品的运费计算信息，而运费策略是店铺维度的运费计算规则；</span>
            </div>
            <div class="p-line" style="margin-bottom:12px">
                <span>当店铺运费策略为：<span class="orange">不设置</span>商品运费由运费模版计算得出；</span>
            </div>
            <div class="p-line" style="margin-bottom:12px">
                <span>当店铺运费策略为：<span class="orange">全场包邮</span>则店铺内所有商品都包邮；</span>
            </div>
            <div class="p-line" >
                <span>当店铺运费策略为：<span>满X包邮</span>则当用户购买的商品总运费未达到X元则收取实际金额，达到X元则包邮；</span>
            </div>
        </div>
        <el-dialog v-model="strategyFlag" title="店铺运费策略" width="420px">
            <div style="width:100%;padding-top:14px" v-if="strategyFlag">
                <el-form :model="form" label-width="98px" >
                    <el-form-item label="选择包邮条件" >
                        <el-select v-model="form.condition" placeholder="请选择"  clearable v-selectClose style="width:260px">
                            <el-option label="未设置" :value="1" />
                            <el-option label="全场包邮" :value="2" />
                            <el-option label="购满X元，享包邮" :value="3" />
                        </el-select> 
                    </el-form-item>
                    <el-form-item label="" v-if="form.condition == 3">
                        <span style="color:#222222">购满</span>
                        <el-input v-model="form.price" placeholder="请输入" style="width:120px;margin:0 8px" clearable @input="()=>{form.price=limitFloat(form.price)}"/>
                        <span style="color:#222222">元，享包邮</span>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="strategyFlag = false">取消</el-button>
                    <el-button type="primary" @click="confrimStrategy()">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style lang="less" scoped>
.page-info{
    width: 100%;
    height: 100%;
    padding:24px;
    box-sizing: border-box;
    padding-top:8px;
}

.lis{
    width: 100%;
    margin-bottom:24px;
    &:last-child{
        margin-bottom:0;
    }
    .question{
        width: 100%;
        display: flex;
        margin-bottom:16px;
        span{
            color: #222222;
            font-weight: bold;
            font-size: 14px;
            line-height: 14px;
        }
        .img{
            width: 20px;
            height: 20px;
            background: url('@/assets/icon/question-icon.png');
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-weight: bold;
            font-size: 12px;
            margin-right:8px
        }
    }
}
.p-line{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    span{
        font-weight: 400;
        font-size: 14px;
        color: #222222;
        line-height: 14px;
    }
    .a-link{
        font-size: 14px;
        color: #3480ff;
        font-weight: 400;
        line-height: 14px;
        cursor: pointer;
    }
    .orange{
        color:#FF6B00;
        margin:0 10px;
    }
}
.lis-head{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom:16px;
    .icon-view{
        margin-right: 8px;
        position: relative;
        width: 14px;
        height: 14px;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #10E7F9; 
        }
        .icon-view-on{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #3480FF; /* 背景色 */
        }
    }
    .label-name{
        color: #000000;
        font-weight: bold;
        font-size: 14px;
        margin-right: 8px;
    }
    img{
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
}
</style>